<template>
    <Content :style="{padding: '0 16px 16px'}">
        <Breadcrumb :style="{margin: '20px 0'}">
            <BreadcrumbItem>菜单管理</BreadcrumbItem>
        </Breadcrumb>
        <Card>
            <Row>
                <Col span="8">
                    <Button type="info">添加</Button>&nbsp;
                    <Button type="warning">编辑</Button>&nbsp;
                    <Button type="error" @click="delMenu()">删除</Button>
                    <Tree :data="data2" show-checkbox ref="tree"></Tree>
                </Col>
                <Col span="14">
                    <Form :model="formItem" :label-width="80">
                        <FormItem label="菜单名称：">
                            <Input v-model="formItem.input" placeholder="请输入菜单名"></Input>
                        </FormItem>
                        <FormItem label="菜单图标：">
                            <Select v-model="formItem.select">
                                <Option value="beijing">无</Option>
                                <Option value="shanghai">前台菜单</Option>
                                <Option value="shenzhen">后台菜单</Option>
                                <Option value="shenzhen">用户管理</Option>
                                <Option value="shenzhen">文章管理</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="父级菜单：">
                            <Select v-model="formItem.select">
                                <Option value="beijing">无</Option>
                                <Option value="shanghai">前台菜单</Option>
                                <Option value="shenzhen">后台菜单</Option>
                                <Option value="shenzhen">用户管理</Option>
                                <Option value="shenzhen">文章管理</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="菜单类型：">
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="male">后台菜单</Radio>
                                <Radio label="female">前台菜单</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="菜单URL：">
                            <Input v-model="formItem.input" placeholder="请输入菜单url"></Input>
                        </FormItem>
                        <FormItem label="菜单状态：">
                            <i-switch v-model="formItem.switch" size="large">
                                <span slot="open">启用</span>
                                <span slot="close">禁用</span>
                            </i-switch>
                        </FormItem>

                        <FormItem>
                            <Button type="primary">提交</Button>
                            <Button style="margin-left: 8px">Cancel</Button>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Card>
    </Content>
</template>
<script>
    export default {
        data() {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                },
                data2: [
                    {
                        id: 2,
                        title: '后台菜单',
                        expand: true,
                        disableCheckbox: true,
                        children: [
                            {
                                id: 3,
                                title: '用户管理',
                                children: [
                                    {
                                        id: 7,
                                        title: '添加用户'
                                    },
                                    {
                                        id: 8,
                                        title: '管理用户'
                                    }
                                ]
                            },
                            {
                                id: 3,
                                title: '菜单管理',
                                disableCheckbox: true,
                                children: [
                                    {
                                        id: 7,
                                        title: '管理菜单',
                                        disableCheckbox: true
                                    }
                                ]
                            },
                            {
                                id: 3,
                                title: '文章管理',
                                children: [
                                    {
                                        id: 7,
                                        title: '发表文章'
                                    },
                                    {
                                        id: 8,
                                        title: '管理文章'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 6,
                        title: '前台菜单',
                        expand: true,
                        disableCheckbox: true,
                        children: [
                            {
                                id: 7,
                                title: 'leaf 1-2-1'
                            },
                            {
                                id: 8,
                                title: 'leaf 1-2-1'
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            delMenu() {
                var arrayMenus = this.$refs.tree.getCheckedNodes();
                for (var i = 0; i < arrayMenus.length; i++) {
                    console.log(arrayMenus[i].id)

                }
            }
        }
        ,
        mounted:function() {
            document.title="菜单管理"
        }
    }
</script>
